<template>
  <div class="title">地震烈度图</div>
  <div class="chartbox">
    <img :src="chartRef" alt="" @click="flag = true" />
  </div>

  <teleport to="body">
    <div class="screen" v-if="flag" @click="flag = false">
      <img :src="chartRef" alt="" srcset="" />
    </div>
  </teleport>
</template>  
  
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { initMap } from '../../api/gis2d/mapbase'
const chartRef = ref('')
const flag = ref(false)

const getData = (e) => {
  const blobUrl = URL.createObjectURL(e)
  chartRef.value = blobUrl
}
// 主动暴露childMethod方法
defineExpose({ getData })
</script>  
  
<style lang="scss" scoped>
.screen {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #16151599;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
  }
}
.title {
  height: 41px;
  color: #fff;
  line-height: 41px;
  font-size: 18px;
  padding-left: 26px;
  font-weight: bold;
}
.chartbox {
  height: calc(100% - 41px);
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
  }
}
</style>